---
title: "Loading Component"
---

The Loading Component is displayed for a row to show data is loading.

The example below demonstrates replacing the Provided Loading Component with a Custom Loading Component.

* **Custom Loading Component** is supplied by name via `gridOptions.loadingCellRenderer`.
* **Custom Loading Component Parameters** are supplied using `gridOptions.loadingCellRendererParams`.
* Example simulates a long delay to display the spinner clearly.
* Scrolling the grid will request more rows and again display the loading cell renderer.

{% gridExampleRunner title="Custom Loading Cell Renderer" name="custom-loading-cell-renderer" /%}

## Custom Component

{% includeMarkdoc file="component-loading-cell-renderer/_component-interface-javascript.mdoc" /%}
{% includeMarkdoc file="component-loading-cell-renderer/_component-interface-angular.mdoc" /%}
{% includeMarkdoc file="component-loading-cell-renderer/_component-interface-react.mdoc" /%}
{% includeMarkdoc file="component-loading-cell-renderer/_component-interface-vue.mdoc" /%}

{% if isFramework("javascript", "angular", "vue") %}
{% interfaceDocumentation interfaceName="ILoadingCellRendererParams" names=["api", "context", "node"] /%}
{% /if %}

{% if isFramework("react") %}
{% interfaceDocumentation interfaceName="CustomLoadingCellRendererProps" names=["api", "context", "node"] /%}
{% /if %}

## Dynamic Selection

It's possible to determine what Loading Cell Renderer to use dynamically - i.e. at runtime. This requires providing a `loadingCellRendererSelector`.

{% if isFramework("javascript", "angular", "react") %}
{% includeMarkdoc file="component-loading-cell-renderer/_component-dynamic-angular-react-js.mdoc" /%}
{% /if %}

{% includeMarkdoc file="component-loading-cell-renderer/_component-dynamic-vue.mdoc" /%}
